/*

TemplateMo 568 DigiMedia

https://templatemo.com/tm-568-digimedia

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact2
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/*https://www.canva.com/colors/color-wheel/*/

/*  ------------------ messing with the column styles ------------------ */

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: ;
  color: white;
  text-align: center;
}


label {
 padding-top: 10px;
}

.col-sm-1 {
  padding-left: 1px;
  padding-right: 1px;
  padding-top: 1px;
  display: flex;
  background-color: #e2e8e3;
}

.col-sm-2 {
  padding-left: 1px;
  padding-right: 1px;
  background-color: #e2e8e3;
}

.col-sm-3 {
  padding-left: 1px;
  padding-right: 1px;
  background-color: #e2e8e3;
}

.col-sm, .col-sm-4, .col-sm-5, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-6 {
  padding: 1px;
  background-color: #e2e8e3;
}


div.astor-box-2 {
  border: 1px solid;
  border-color: #aabaab;
  border-radius: 10px;
  background-color: whitesmoke;
  padding: 2px 20px 20px 20px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}


/* -------------------------------------------------------------- */

/* ASTOR TABLE */
.astor-table {
  width: 90%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px; /* Rounded corners */
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for lift effect */
  border: 1px solid #d1d5db; /* Soft border for outline */
  font-size: 14px;
  text-align: left; /* Left-align text by default */
  margin: auto;
}

.astor-table a{
  color: white;
}

.astor-table a:hover{
  color: #aabaab;
}

/* Header Row Styling */
.astor-table thead th {
  padding: 12px 15px;
  background-color: #7e9190; /* Darker background color */
  color: #ffffff; /* White text for header */
  text-align: left; /* Align text to the left */
  border-bottom: 2px solid #3a4648; /* Bottom border for header */
  font-size: 16px;
  font-weight: bold;
}

/* General Row Styling */
.astor-table tbody tr {
  background-color: #ffffff; /* Default row background */
}

.astor-table tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Light gray for even rows */
}

.astor-table tbody tr:hover {
  background-color: #f1f3f4; /* Hover effect */
  transition: background-color 0.3s ease;
}

/* Data Cell Styling */
.astor-table tbody td {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd; /* Light border between rows */
  color: #4a4a4a; /* Darker text color */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal; /* Remove bold from data cells */
}

/* First Column Styling */
.astor-table tbody td:first-child {
  font-weight: 600; /* Semi-bold for labels */
  color: #333; /* Darker color for emphasis */
  text-align: left; /* Align text to the left */
  width: 35%;
}

.astor-table tbody td:nth-child(2) {
  text-align: center;
}

/* Last Row Styling */
.astor-table tbody tr:last-child td {
  font-weight: bold;
  background-color: #f3f6f7; /* Light background to highlight the last row */
  color: #333; /* Darker text for emphasis */
  border-top: 1px solid #ced4da; /* Top border for emphasis */
}

/* Enhanced Borders Between Columns */
.astor-table td {
  border-right: 1px solid #e8e9eb; /* Light border between columns */
}

.astor-table td:last-child {
  border-right: none; /* Remove right border from the last column */
}

/* END ASTOR TABLE */




/* -------------------------------------------------------------- */

.time table {;
  border-collapse: collapse;
}

.time thead{
  border: 1px solid white;
  border-color: black;
  background-color: ;
  text-align: center;
  height: 40px;
  border-radius: 6px;
}

.time thead th{
  font-size: 13px;
  border: 1px solid white;
  border-radius: 6px;
}

.time thead th:first-child {
  font-size: 13px;
  border: 1px solid white;
  width: 500px;
  border-radius: 6px;
}

.time thead th:nth-child {
  font-size: 13px;
  border: 1px solid white;
  width: 150px;
}

.time thead tr{
  font-size: 13px;
  border: 1px solid white;
  width: 500px;
}

.time tbody{
  border: 1px solid white;
  border-color: black;
  background-color: ;
  text-align: center;
  color: black;
}

.time tbody th:first-child {
  font-size: 13px;
  border: 1px solid white;
  width: 500px;
  color: black;
}

.time tbody th:nth-child {
  font-size: 13px;
  border: 1px solid white;
  width: 150px;
  color: black;
}

.time tbody th {
  text-align: left;
  padding-left: 10px;
  border: 1px solid white;
  color: black;
}

.time tbody tr {
  text-align: left;
  padding-left: 10px;
  border: 1px solid white;
  color: black;
}

.time tbody td {
  text-align: left;
  padding-left: 10px;
  border: 1px solid whitesmoke;
  color: black;
}

.time th {
  background-color: #e2e8e3;
  border: 1px solid white;
  font-weight: normal;
}

.time td {
  width: 250px;
}



/* ------------------------- ASTOR PDF BP SHORT ------------------------------------- */


.astor-pdf-1 tbody {
  margin: 0 auto;
}

/* outside table */
.astor-pdf-1 tbody tr {
  padding-left: 10px;
  border: 1px groove;
  border-radius: 6px;
  border-color: whitesmoke;
  background-color: #D2DBD3;
  color: black;
  font-size: 13px;
  text-align: center;

}

.astor-pdf-1 tbody tr:first-child {
  height: 32px;
}

.astor-pdf-1 tbody tr:nth-child(5) {
  height: 28px;
  border-top: 2px groove; black;
}

.astor-pdf-1 tbody tr:last-child {
  height: 28px;
  border-top: 2px groove;
  border-bottom: 3px groove black;
}

.astor-pdf-1 tbody tr:last-child td{
  border-top: 2px groove;
  border-bottom: 3px groove black;
  background-color: whitesmoke;
}

/* top row */
.astor-pdf-1 tbody th {
  padding-left: 10px;
  border: 1px groove;
  border-radius: 6px;
  border-color: whitesmoke;
  background-color: #D2DBD3;
  color: black;
  font-size: 13px;
  text-align: right;
  width: 85px;
}

.astor-pdf-1 tbody th:nth-child(1) {
  width: 225px;
  text-align: left;
}

.astor-pdf-1 tbody th:nth-child(2) {
  width: 100px;
}

.astor-pdf-1 tbody th:nth-child(7) {
  width: 150px;
  border-left: 4px solid whitesmoke;
}

.astor-pdf-1 tbody th:nth-child(8) {
  width: 150px;
  border-left: 4px solid whitesmoke;
}

/* body rows */
.astor-pdf-1 tbody td {
  padding-left: 13px;
  border: 1px solid;
  border-color: whitesmoke;
  border-radius: 6px;
  background-color: #e2e8e3;
  color: black;
  text-align: right;
}

.astor-pdf-1 tbody td:nth-child(1) {
  text-align: left;
}

.astor-pdf-1 tbody td:nth-child(2) {
  text-align: right;
}

.astor-pdf-1 tbody td:nth-child(7) {
  text-align: right;
  border-left: 4px solid whitesmoke;
}

.astor-pdf-1 tbody td:nth-child(8) {
  text-align: right;
  border-left: 4px solid whitesmoke;
  padding-right: 10px;
}


/* ----------- ------------- */

.astor-pdf-2 tbody {
  margin: 0 auto;
}

/* outside table */
.astor-pdf-2 tbody tr {
  padding-left: 10px;
  border: 1px groove;
  border-radius: 6px;
  border-color: whitesmoke;
  background-color: #D2DBD3;
  color: black;
  font-size: 13px;
  text-align: center;
}

.astor-pdf-2 tbody tr:first-child {
  height: 32px;
}

.astor-pdf-2 tbody tr:nth-child(2) {
  height: 28px;
}

.astor-pdf-2 tbody tr:nth-child(5) {
  height: 28px;
  border-top: 2px groove; black;
}

.astor-pdf-2 tbody tr:nth-child(15) {
  height: 28px;
  border-top: 2px groove; black;
}


.astor-pdf-2 tbody tr:nth-child(18) {
  height: 28px;
}

.astor-pdf-2 tbody tr:last-child {
  border-top: 2px groove;
  border-bottom: 3px groove black;
}

.astor-pdf-2 tbody tr:last-child td{
  border-top: 2px groove;
  border-bottom: 3px groove black;
  background-color: whitesmoke;
}

/* top row */
.astor-pdf-2 tbody th {
  padding-left: 10px;
  border: 1px groove;
  border-radius: 6px;
  border-color: whitesmoke;
  background-color: #D2DBD3;
  color: black;
  font-size: 13px;
  text-align: right;
  width: 85px;
}

.astor-pdf-2 tbody th:nth-child(1) {
  text-align: left;
  width: 400px;
}

.astor-pdf-2 tbody th:nth-child(5) {
  width: 150px;
  border-left: 4px solid whitesmoke;
}

.astor-pdf-2 tbody th:nth-child(6) {
  width: 150px;
  border-left: 4px solid whitesmoke;
}

/* body rows */
.astor-pdf-2 tbody td {
  padding-left: 13px;
  border: 1px solid;
  border-color: whitesmoke;
  border-radius: 6px;
  background-color: #e2e8e3;
  color: black;
  text-align: right;
}

.astor-pdf-2 tbody td:nth-child(1) {
  text-align: left;
}

.astor-pdf-2 tbody td:nth-child(5) {
  text-align: right;
  border-left: 4px solid whitesmoke;
}

.astor-pdf-2 tbody td:nth-child(6) {
  text-align: right;
  border-left: 4px solid whitesmoke;
  padding-right: 10px;
}



/* ------ ------ */



.astor-pdf-3 tbody {
  margin: 0 auto;
  border-top: 2px groove;
  border-left: 2px groove;
  border-bottom: 4px groove;
  border-right: 4px groove;
}

/* outside table */
.astor-pdf-3 tbody tr {
  padding-left: 10px;
  background-color: #D2DBD3;
  color: black;
  font-size: 13px;
  text-align: center;
}

/* top row */
.astor-pdf-3 tbody th {
  padding-left: 10px;
  padding-right: 10px;
  color: black;
  font-size: 13px;
  text-align: right;
  width: 85px;
}

.astor-pdf-3 tbody tr:first-child {
  height: 32px;
}

.astor-pdf-3 tbody th:nth-child(1) {
  padding-left: 10px;
  color: black;
  font-size: 13px;
  text-align: left;
  width: 655px;
}

.astor-pdf-3 tbody th:nth-child(2) {
  padding-left: 10px;
  color: black;
  font-size: 13px;
  text-align: right;
  width: 300px;
}

/* body rows */
.astor-pdf-3 tbody td {
  padding-left: 13px;
  padding-right: 10px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: whitesmoke;
  background-color: #e2e8e3;
  color: black;
  text-align: right;
}

.astor-pdf-3 tbody td:nth-child(1) {
  text-align: left;
}

.astor-pdf-3 tbody td:nth-child(2) {
  text-align: right;
}


/* -------------------------END ASTOR PDF BP SHORT ------------------------------------- */

.astor-sugg tbody {
  margin: 0 auto;
  font-size: 11px;
}

.astor-sugg tr {
  height: 30px;
}

.astor-sugg tr:last-child td {
  border-top: 2px groove black;
  background-color: whitesmoke;
  height: 30px;
}

.astor-sugg th {
  border: 1px groove;
  border-radius: 6px;
  border-color: whitesmoke;
  background-color: #D2DBD3;
  color: black;
  width: 100px;
  text-align: right;
}

.astor-sugg th:first-child {
  width: 150px;
  text-align: left;
}

.astor-sugg th:nth-child(4) {
  width: 200px;
  border-left: 5px solid whitesmoke;
}


.astor-sugg td {
  padding-left: 5px;
  border: 1px solid;
  border-color: whitesmoke;
  border-radius: 6px;
  background-color: #e2e8e3;
  color: black;
  text-align: right;
}

.astor-sugg td:first-child {
  text-align: left;
}

.astor-sugg td:nth-child(4) {
  border-left: 5px solid whitesmoke;
}



/* -------------------------------------------------------------- */

.astor-sheets-title {
  text-align: left;
  padding: 2px;
  height: 40px;
  width: 100%;
  border: 1px;
  border-radius: 6px;
  margin: 1px;
  border-color: white;
  border-style: groove;
  background-color: #7e9190;
  color: white;
  font-style: bold;
}

.astor-sheets-photo {
  height: 220px;
  width: 250px;
  border-radius: 6px;
}

/* the css for the project_image */
.astor-img-photo {
  padding: 5px;
}
/* end */

.table-start {
  width: 100%;
  border-collapse: collapse;
  padding: 0px;
}

.table-start th {
  text-align: right;
  padding-right: 8px;
}

.table-start th:first-child {
  text-align: left;
  padding-left: 8px;
}

.astor-image{
  align-self: center;
  height: 220px;
  width: 250px;
  border-radius: 12px;
}

.astor-main-image{
  align-self: center;
  border-radius: 100px;
}

/*---------------------------------------------------*/

.social-footer {
  padding: 1rem;
  height: 150px;
  background: #aabaab;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.social-footer .social-footer-icons li:last-of-type {
  margin-right: 0;
}

.social-footer .social-footer-icons .fa {
  font-size: 1.3rem;
  color: #fefefe;
}

.social-footer .social-footer-icons .fa:hover {
  color: #4a4a4a;
  transition: color 0.3s ease-in;
}

.astor-footer{
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.astor-footer-box{
  width: 64%;
  padding-top: 3px;
}

.astor-footer-button{
  width: 35%;
  padding-top: 3px;
  align-self: left;
}

.astor-footer-button:hover{
  color: #aabaab;
}

/*---------------------------------------------------*/

.astor-container{
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: whitesmoke;
  border-radius: 0 0 23px 23px;
  text-align: center;
}

.astor-container-process{
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: whitesmoke;
  border-radius: 23px;
  text-align: center;
  height: 700px;
  padding: 40px;
  padding-left: 50px;
  padding-right: 50px;
}

.astor-container-search{
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #e2e8e3;
  border-radius: 23px;
  text-align: center;
  width: 70%;
  margin: 0 auto;
}

.astor-container2{
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #aabaab;
  border-radius: 20px;
  text-align: center;
  padding: 20px;
  height: 400px;
  margin: 25px;
  opacity: 0.97;
}

.astor-top{
  padding: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  color:whitesmoke;
}

.astor-middle{
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-style: italic;
  font-size: 23px;
  color: whitesmoke;
}
.astor-bottom{
  padding-top: 20px;
  padding-bottom: 20px;
  height: 150px;
  text-align: center;
  font-style: ;
}


.p-text{
  color: white;
}

.astor-modal-container{
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #7e9190;
  border-radius: 23px;
  text-align: center;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 50px;
}

.astor-box {
  margin-top: 10px;
  margin-bottom: 10px;
}

.astor-box-buttons {
  display: flex;
  justify-content: space-around; /* Evenly space buttons */
  align-items: center;
  gap: 15px;
  padding: 10px 20px 2px 20px;
  border-radius: 8px 8px 0 0; /* Rounded top edges only */
  box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.15); /* Bottom shadow only */
  margin-bottom: 20px;
}

.astor-box-margin {
  margin-top: 40px;
  margin-bottom: px;
}

.astor-button {
  background-color: whitesmoke;
  color: #aabaab;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid #aabaab;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-right: 10px;
  font-weight : bold;
}

.astor-button:hover {
  background-color: #aabaab;
  color: whitesmoke !important;
  border: 1px solid whitesmoke;
}

.astor-form {
  padding: 50px 60px 50px 60px;
}

.astor-submit {
  background-color: #aabaab;
  border-radius: 5px;
  border: 1px solid white;
  color: whitesmoke;
}

.astor-submit:hover {
  background-color: white;
  border-radius: 5px;
  border: 1px solid white;
  color: #aabaab;
}

.astor-other-bp {
  background-color: whitesmoke;
  border-radius: 5px;
  border: 1px solid #aabaab;
  color: black;
}

.astor-other-bp:hover {
  background-color: #aabaab;
  color: whitesmoke;
}

.astor-other-bp a {
  background-color: whitesmoke;
  color: black;
}

.astor-other-bp a:hover{
  background-color: #aabaab;
  color: whitesmoke;
}


.navbar-logo {
  height: 100px;
  width: 200px;
}


.bp-spice {
  background-color: #7e9190;
  color: whitesmoke;
  font-size: 13px;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 5px;
  border-radius: 5px;
  margin-top: 15px;
}


.table-bp {
  width: 100%;
  border-collapse: collapse;
  padding: 0px;
}

.table-bp th {
  text-align: right;
  padding-right: 8px;
}

.table-bp th:first-child {
  text-align: left;
  padding-left: 2px;
}

/* Default (collapsed) state: fully rounded */
.astor-bar {
  background-color: #7e9190;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border-radius: 23px; /* Fully rounded when collapsed */
}

/* Expanded state: only top corners rounded */
.container:has(#project.show) .astor-bar {
  border-radius: 23px 23px 0 0; /* Rounded only on top when expanded */
}

/* Default (collapsed) state: fully rounded */
.astor-bar-2 {
  background-color: #7e9190;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border-radius: 23px; /* Fully rounded when collapsed */
}

/* Expanded state: only top corners rounded */
.container:has(#timing.show) .astor-bar-2 {
  border-radius: 23px 23px 0 0; /* Rounded only on top when expanded */
}

/* Default (collapsed) state: fully rounded */
.astor-bar-3 {
  background-color: #7e9190;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border-radius: 23px; /* Fully rounded when collapsed */
}

/* Expanded state: only top corners rounded */
.container:has(#revenue.show) .astor-bar-3 {
  border-radius: 23px 23px 0 0; /* Rounded only on top when expanded */
}

/* Default (collapsed) state: fully rounded */
.astor-bar-4 {
  background-color: #7e9190;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  border-radius: 23px; /* Fully rounded when collapsed */
}

/* Expanded state: only top corners rounded */
.container:has(#expenses.show) .astor-bar-4 {
  border-radius: 23px 23px 0 0; /* Rounded only on top when expanded */
}



/* TABLE EXPENSES */
.table-expenses {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  color: #3a3a3a;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-expenses th, .table-expenses td {
  padding: 8px; /* Original spacing retained */
  text-align: right;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
}

/* Ensure the First Header and First Column are Left-Aligned */
.table-expenses th:first-child,
.table-expenses tr:first-child th {
  text-align: left !important; /* Use !important to override any conflicting styles */
}

.table-expenses td:first-child {
  text-align: left;
  width: 15%; /* Slightly larger width for the first column */
}

/* Adjust the Width of Columns 2, 3, and 4 */
.table-expenses th:nth-child(2),
.table-expenses td:nth-child(2) {
  width: 8%; /* Smallest width for column 2 */
}

.table-expenses th:nth-child(3),
.table-expenses td:nth-child(3),
.table-expenses th:nth-child(4),
.table-expenses td:nth-child(4) {
  width: 12%; /* Uniform width for columns 3 and 4 */
}

/* Last Four Columns (Uniform Size & Highlight for Calculated Fields) */
.table-expenses th:nth-last-child(-n+4),
.table-expenses td:nth-last-child(-n+4) {
  width: 10%; /* Fixed width for the last 4 columns */
  background-color: #f0f0f0; /* Subtle gray to indicate calculated fields */
  text-align: right;
  pointer-events: none;
  color: #555555; /* Dark gray for text */
  border-left: 1px solid #d0d0d0;
}

/* Totals Row Styling */
.table-expenses tr:last-child {
  font-weight: bold;
  background-color: #f2f2f2;
  color: #1a1a1a;
  border-top: 2px solid #bfbfbf;
}

.table-expenses tr:last-child td {
  font-size: 14px;
}

/* Alternating Row Colors */
.table-expenses tr:nth-child(even) {
  background-color: #fafafa;
}

/* No Border on Last Cell */
.table-expenses td:last-child {
  border-right: none;
}

/* Hover Effect */
.table-expenses tr:hover {
  background-color: #f0f0f0;
}
/* END TABLE EXPENSES */






/* TABLE REVENUE */
.table-revenue {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  color: #3a3a3a;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-revenue th, .table-revenue td {
  padding: 8px; /* Original spacing retained */
  text-align: right;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

/* Ensure the First Header and First Column are Left-Aligned */
.table-revenue th:first-child,
.table-revenue tr:first-child th {
  text-align: left !important; /* Use !important to override any conflicting styles */
}

.table-revenue td:first-child {
  text-align: left;
  width: 12.5%;
}

/* Adjust the Width of the Third and Fourth Columns */
.table-revenue th:nth-child(3),
.table-revenue td:nth-child(3),
.table-revenue th:nth-child(4),
.table-revenue td:nth-child(4) {
  width: 7.5%; /* 75% of the original width */
}

/* Last Four Columns (Uniform Size & Highlight for Calculated Fields) */
.table-revenue th:nth-last-child(-n+4),
.table-revenue td:nth-last-child(-n+4) {
  width: 10%; /* Fixed width for the last 4 columns */
  background-color: #f0f0f0; /* Subtle gray to indicate calculated fields */
  text-align: right;
  pointer-events: none;
  color: #555555; /* Dark gray for text */
  border-left: 1px solid #d0d0d0;
}

/* Totals Row Styling */
.table-revenue tr:last-child {
  font-weight: bold;
  background-color: #f2f2f2;
  color: #1a1a1a;
  border-top: 2px solid #bfbfbf;
}

.table-revenue tr:last-child td {
  font-size: 14px;
}

/* Alternating Row Colors */
.table-revenue tr:nth-child(even) {
  background-color: #fafafa;
}

/* No Border on Last Cell */
.table-revenue td:last-child {
  border-right: none;
}

/* Hover Effect */
.table-revenue tr:hover {
  background-color: #f0f0f0;
}
/* END TABLE REVENUE */











/* BP SUMMARY TABLE */
/* General Table Styling */
.table-summary {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  margin: 0;
  text-align: right;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Light shadow for lift effect */
  border: 1px solid #d1d5db; /* Soft border for outline */
}

/* Styling for Spacer Rows */
.table-summary .spacer-row td {
  background-color: transparent;
  border: none;
  padding-top: 20px;
  font-weight: bold !important; /* Ensure the text is bold */
  color: #333; /* Default text color */
  border-top: 1px solid #d1d5db; /* Top border for separation */
  border-bottom: 1px solid #d1d5db; /* Bottom border for separation */
}

/* First Header Row Styling */
.table-summary th:first-child {
  text-align: left;
}

/* Heading Row Styling */
.table-summary th {
  padding: 12px 15px;
  text-align: left;
  white-space: nowrap; /* Prevents text from wrapping */
  font-size: 16px;
  font-weight: bold;
}

/* Secondary Header Row Styling */
.table-summary thead tr:nth-child(2) th {
  background-color: #7e9190; /* Darker background color for header */
  color: #ffffff; /* White text for contrast */
  text-align: right;
  padding: 10px 15px;
  border-bottom: 2px solid #3a4648; /* Bottom border for header */
  font-size: 14px;
}

/* Row Styling */
.table-summary td {
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right; /* Align text to the right */
}

/* Remove the right border from the last cell in each row */
.table-summary td:last-child {
  border-right: none;
}

/* Alternating Row Colors for Clarity */
.table-summary tr:nth-child(even) {
  background-color: #f4f7f6; /* Very light gray for alternating rows */
}

.table-summary tr:hover {
  background-color: #f0f4f7; /* Light hover effect */
  transition: background-color 0.3s ease;
}

/* Total Column Styling */
.table-summary td:last-child {
  font-weight: bold;
  color: #000;
  background-color: #f9fafb; /* Light background for emphasis */
  border-left: 1px solid #d1d5db; /* Left border for separation */
}

/* First Column Styling (Headings) */
.table-summary td:first-child {
  text-align: left;
  font-weight: normal; /* Remove bold */
  color: #333; /* Default text color */
  border-right: 1px solid #d1d5db; /* Right border for separation */
}

/* Enhanced Borders Between Columns */
.table-summary th, .table-summary td {
  border-right: 1px solid #e8eaed; /* Light border between columns */
}

/* Remove the right border from the last column */
.table-summary th:last-child, .table-summary td:last-child {
  border-right: none;
}

/* END BP SUMMARY TABLE */







/* Floating Widget */
.floating-widget {
  position: fixed;
  top: 50%; /* Center the widget vertically */
  left: 20px; /* Keep a margin from the left side */
  transform: translateY(-50%); /* Center the widget vertically */
  max-width: 300px; /* Slightly wider for a more interactive look */
  background-color: #ffffff; /* White background for a clean look */
  border: 2px solid #7e9190; /* Proptech color for the border */
  border-radius: 12px; /* Smooth, modern rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* A stylish shadow effect */
  z-index: 1000;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
  overflow: hidden; /* Prevent content overflow */
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  background-color: #7e9190; /* Proptech color for the header */
  color: #ffffff; /* White text for contrast */
}

.widget-header h4 {
  margin: 0;
  font-size: 18px;
}

.toggle-button {
  background-color: transparent;
  border: none;
  color: #ffffff;
  font-size: 24px; /* Larger font size for a more obvious "X" */
  font-weight: bold;
  margin-left: 15px; /* Add some space between the "X" and the title */
  padding-bottom: 15px;
  outline: none; /* Remove default focus outline */
  transition: color 0.3s ease; /* Smooth color transition on hover */
  align-self: end;
}

.toggle-button:hover {
  color: #ff4d4d; /* Change to a red color on hover for emphasis */
}

.widget-content {
  overflow: hidden; /* Hide overflowing content when collapsed */
  transition: max-height 0.3s ease; /* Smooth transition for max-height */
  padding: 0 20px; /* Padding to make content look good when expanded */
}

.widget-content p {
  margin: 10px 0;
  font-size: 15px;
}

/* Media Query to Adjust on Smaller Screens */
@media (max-width: 1200px) {
  .floating-widget {
    left: 10px; /* Reduce left margin on smaller screens */
    max-width: 250px; /* Reduce the width to fit better */
  }
}

@media (max-width: 768px) {
  .floating-widget {
    display: none; /* Hide the widget on very small screens to prevent layout issues */
  }
}
/* End Floating Widget */



.hidden-input-row {
  position: absolute;
  left: -9999px; /* Move them far off-screen */
  visibility: hidden;
  height: 0;
  width: 0;
  overflow: hidden;
}


/* ----------------- Astor Login ------------------- */


/* Login Container */
.astor-login-container {
  width: 100%;
  max-width: 500px;
  padding: 40px;
  background-color: #fff;
  margin: 60px auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  border: 1px solid #e6e6e6;
}

/* Form Layout */
form#astor-login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Form Group */
.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.form-group label {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

/* Input Fields */
form#astor-login-form input {
  width: 100%;
  height: 46px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

form#astor-login-form input:focus {
  border-color: #7e9190;
  outline: none;
}

/* Button Styling */
.btn-submit {
  width: 100%;
  padding: 12px;
  background-color: #7e9190;
  color: white;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-submit:hover {
  background-color: #4B5756;
}

/* Reset Password Section */
.reset-password {
  text-align: center;
  font-size: 14px;
  color: #777;
}

.reset-password a {
  color: #7e9190;
  text-decoration: none;
  transition: color 0.3s ease;
}

.reset-password a:hover {
  color: #4B5756;
}

/* Responsive Design */
@media (max-width: 768px) {
  .astor-login-container {
    width: 90%;
    padding: 30px;
  }
}

@media (max-width: 480px) {
  .astor-login-container {
    width: 95%;
    padding: 20px;
  }

  .form-group label {
    font-size: 12px;
  }

  form#astor-login-form input {
    font-size: 14px;
  }

  .btn-submit {
    font-size: 14px;
  }
}






/* ----------------- END Astor Login ------------------- */


/* ----------------- Search Sheet Tab ------------------- */

/* Tables https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables */
.search-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}

/*.search-table thead, .search-table thead th, .search-table th, .search-table td, .search-table tfoot th, .search-table tbody td, .search-table tfoot, .search-table tfoot td, .search-table tbody tr, .search-table table { display: block; }
*/
.search-table thead th:nth-child(1) {
  width: 5%;
}

.search-table thead th:nth-child(2) {
  width: 17%;
}

.search-table thead th:nth-child(3) {
  width: 27%;
}

.search-table thead th:nth-child(4) {
  width: 17%;
}

.search-table thead th:nth-child(5) {
  width: 17%;
}

.search-table thead th:nth-child(6) {
  width: 17%;
}

.search-table th {
  padding: 10px;
  text-align: center;
}

.search-table td {
  padding: 5px;
  font-size: 13;
}

.search-table thead th,
.search-table tfoot th {
  font-family: "", ;
}

.search-table th {
  letter-spacing: 0px;
}

.search-table td {
  letter-spacing: 0px;
}

.search-table thead th {
  text-align: center;
}

.search-table tbody td {
  text-align: center;
}

.search-table tfoot th {
  text-align: right;
}

/* graphics and colors */
.search-table thead,
.search-table tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

.search-table thead th,
.search-table tfoot th,
.search-table tfoot td {
  background: #689C7A;
  border: 1px solid black;
}

/* zebra striping */

.search-table tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

.search-table tbody tr:nth-child(even) {
  background-color: #e495e4;
}

.search-table tbody tr {
  background-image: url(noise.png);
}

.search-table table {
  background-color: #ff33cc;
}

.astor-innerbox {
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #e2e8e3;
}

.astor-searchyboy {
  width: 100%;
  height: 44px;
  margin-left: 0px;
  padding-right: 10px;
  border-radius: 3px;
  border: 1px solid black;
  display: inline-block;
}

.astor-searchbox{
  padding-top: 10px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 100px;
  border: 5px;
  border-color: black;
}

.astor-titlebox{
  padding-left: 50px;
  padding-top: 100px;
  padding-bottom: 15px;
  padding-right: 50px;
  background-color: #e2e8e3;
  border-radius: 23px 23px 0px 0px;
}

.astor-searchbutton{
  background: #7e9190;
  color: white;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  width: 100%;
  padding: 5px 5px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-size: small;
  height: 100%;
  text-decoration: none; /* Remove underline on text */
}

/* Ensure white text for <a> tags within .modal-button */
.astor-searchbutton a {
  color: white;
  text-decoration: none; /* Ensure no underline */
}

/* Hover effects */
.astor-searchbutton:hover {
  background: #4b645d;
  border-color: #c0c0c0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.astor-searchbutton:hover a {
  color: white; /* Ensure text stays white on hover */
}

.astor-search-photo {
  height: 300px;
  width: 400px;
}

/* ---------------- END Astor Search Page ----------------- */

/* General styling for all tab links */
.nav-link {
  color: white;
  border: 2px solid white;
  background-color: #7e9190;
  width: auto;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 10px 10px 0 0;
  font-size: small;
}

/* Styling for active/selected tab */
.nav-link.active {
  background-color: white;
  color: #7e9190;
  border: 2px solid white;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
}

/* Styling for nav-item to ensure proper spacing and border visibility */
.nav-item {
  margin-right: -2px; /* To avoid double borders between tabs */
  background-color: #4B5756;
  color: #7e9190;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
}

/* Styling for hovering over inactive tabs */
.nav-link:hover {
  color: #4b645d;
  background-color: #f0f0f0;
  border-radius: 10px 10px 0 0;.
  font-weight: bold;
}

/* Styling for focused tabs to give more emphasis */
.nav-link:focus {
  outline: none;
  color: #7e9190;
  background-color: #e0e6e5;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
}

/* Input group text box styling */
.input-group-text {
  background-color: white;
  border-style: hidden;
}

/* Horizontal rule styling */
hr.class-4 {
  border-top: 2px dashed #8c8b8b;
  margin: 1px;
}

/* Styling for the form */
.start-container {
  padding: 20px;
  padding-top: 50px;
  padding-bottom: 60px;
  background-color: #e2e8e3;
  border-radius: 0px 10px 10px 10px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.start-head{
  padding-bottom: 20px;
  padding-left: 25px;
  text-align: left;
  font-size: 30;
  font-weight: bold;
}

.start-text{  
  text-align: left;
  height: 40px;
  border-radius: 2px;
  font-size: 16;
  padding-top: 10px;
  padding-left: 20px;
  font-weight: bold;
}

.img-framer{
  border: 3px solid white;
  align-content: center;
}

.start-button {
  background: #7e9190;
  color: white;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  width: 200px;
  padding: 12px 20px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.start-button:hover {
  background: #4b645d;
  border-color: #c0c0c0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}


/*  -------- ASTOR Business Plan ------------- */

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}


.astor-bp-timing{
  text-align: center;
  height: 40px;
  border :2px solid transparent;
  border-color: #D2DBD3;
  padding-right: 10px;
  text-transform: ;
  overflow: auto;
  font-size: 13;
  background-color: whitesmoke;
}

.astor-bp-timing-m{
  text-align: center;
  height: 40px;
  border :2px solid transparent;
  border-color: #D2DBD3;
  padding-right: 10px;
  text-transform: ;
  overflow: auto;
  font-size: 13;
  background-color: #e2e8e3;
}

.astor-input-group{
  color: black;
  height: 30px;
  background-color: #aabaab;
  position: relative;
  vertical-align: text-bottom;
  padding: 5px;
  border: 2px;
  border-color: #D2DBD3;
  border-radius: 2px;
  font-size: 13;
  width: 100%;
  margin: px;
}

.astor-input-group-dates{
  color: black;
  height: 30px;
  background-color: #aabaab;
  position: relative;
  vertical-align: text-bottom;
  padding: 5px;
  border: 2px;
  border-color: #D2DBD3;
  border-radius: 2px;
  font-size: 8px;
  width: 100%;
  margin: 1px;
}

col-sm-1, .astor-bp-gap {
  width: 110px;
}

col-sm-1, .astor-bp-label {
  width: 150px;
}

col-sm-1, .astor-bp-addy {
  width: 95px;
  padding-left: 15px;
}

col-sm-1, .astor-bp-zaddy {
  width: 150px;
  padding-left: 40px;
}

col-sm-1, .astor-bp-date {
  width: 48px;
  padding: 0px;
  overflow: hidden;
  border-width: 1px;
}

label {
  font-size: 14px;
}

.astor-bp-form-calc {
  text-align: center;
  height: 40px;
  width: 100%;
  border: 2px;
  border-radius: 2px;
  margin: px;
  border-color: #D2DBD3;
  border-style: groove;
  /*background-color: #e2e8e3;*/
  font-size: 13;
}

.astor-bp-form-input {
  text-align: right;
  height: 40px;
  width: 100%;
  border: 2px;
  border-radius: 2px;
  margin: px;
  border-color: #D2DBD3;
  border-style: groove;
  padding-right: 10px;
  text-transform: ;
  overflow: auto;
  font-size: 13;
  background-color: white;
}

.astor-bp-form-name {
  text-align: left;
  height: 40px;
  width: 100%;
  border: 2px;
  border-radius: 2px;
  margin: px;
  border-color: #D2DBD3;
  border-style: groove;
  padding-right: 10px;
  text-transform: ;
  overflow: auto;
  font-size: 13;
  background-color: white;
}

.popover, .astor-bp-form-input {

}

.astor-bp-form-text {
  text-align: left;
  height: 40px;
  width: 100%;
  border: 2px;
  border-radius: 2px;
  margin: 1px;
  border-color: #D2DBD3;
  border-style: groove;
  padding-left: 10px;
  text-transform: ;
  overflow: auto;
  font-size: 13;
  background-color: white;
}

.astor-bp-form-blank {
  text-align: right;
  height: 40px;
  width: 100%;
  border: 2px;
  border-radius: 3px;
  margin: 1px;
  border-color: whitesmoke;
  border-style: groove;
  font-size: 13;
  background-color: #D2D6DB;
  padding-right: 10px;
  font-weight: bold;
  color: blank;
}

.astor-graph {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  transform: scale(0.95); /* Adjusted scaling */
  transform-origin: top left;
}






/*https://www.canva.com/colors/color-wheel/*/
/*https://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html*/

.astor-bp-form-input-disabled {
  text-align: right;
  height: 40px;
  width: 100%;
  border: 2px;
  border-radius: 3px;
  margin: 1px;
  border-color: #D2DBD3;
  border-style: groove;
  padding-right: 10px;
  text-transform: ;
  overflow: auto;
  pointer-events: none;
  background-color: #D2DBD3;
  font-size: 13;
}

.astor-bp-form-total{
  text-align: right;
  height: 40px;
  width: 100%;
  border: 2px;
  border-radius: 3px;
  margin: 1px;
  border-color: #D2DBD3;
  border-style: groove;
  padding-right: 10px;
  text-transform: ;
  overflow: auto;
  pointer-events: none;
  background-color: #D2DBD3;
  font-size: 13;
  font-weight: bold;
}

.astor-bp-form-start {
  text-align: left;
  height: 40px;
  width: 100%;
  border: 1px;
  border-radius: 0px;
  margin: 1px;
  border-color: black;
  border-style: groove;
  padding-left: 20px;
  font-size: 13;
}

.astor-bp-button {
  background-color: #7ea681;
  color: #fff;
  width: 100%;
  border-color: #D7E5DC;
  border-radius: 0px;
  border-style: groove;
  height: 40px;
  margin-top: 40px;
}

.astor-reg-button {
  background-color: #7ea681;
  color: #fff;
  width: 100%;
  border-color: #D7E5DC;
  border-radius: 0px;
  border-style: groove;
}

.astor-bpimage img{
  height: 200px;
  width: 200px;
}


.astor-bp-group{
  color: white;
  height: 40px;
  width: 100%;
  background-color: #689C7A;
  vertical-align: text-bottom;
  padding: 5px;
  border: 1px;
  border-color: black;
  border-radius: 0px;
  margin: 1px;
  border-style: groove;
}

.tab-button {
  background: #7e9190;
  color: white;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  width: 300px;
  padding: 12px 20px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.tab-button:hover {
  background: #4b645d;
  border-color: #c0c0c0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.modal-button {
  background: #7e9190;
  color: white;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  width: 15%;
  padding: 5px 5px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-size: small;
  height: min-content;
  text-decoration: none; /* Remove underline on text */
}

/* Ensure white text for <a> tags within .modal-button */
.modal-button a {
  color: white;
  text-decoration: none; /* Ensure no underline */
}

/* Hover effects */
.modal-button:hover {
  background: #4b645d;
  border-color: #c0c0c0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.modal-button:hover a {
  color: white; /* Ensure text stays white on hover */
}


.modal-button2 {
  background: ;
  color: #7e9190;
  display: inline-block;
  border-radius: 5px;

  width: 20%;
  padding: 5px 5px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;

  transition: all 0.3s ease;
  font-size: small;
  height: min-content;
  text-decoration: none; /* Remove underline on text */
}

/* Ensure white text for <a> tags within .modal-button */
.modal-button2 a {
  color: #7e9190;
  text-decoration: none; /* Ensure no underline */
}

/* Hover effects */
.modal-button2:hover {
  background: #4b645d;
  border-color: #c0c0c0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.modal-button2:hover a {
  color: white; /* Ensure text stays white on hover */
}


.modal-button3 {
  background: #7e9190;
  color: white;
  display: inline-block;
  border-radius: 5px;
  border: 1px solid #e0e0e0;
  width: 100%;
  padding: 5px 5px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-size: small;
  height: min-content;
  text-decoration: none; /* Remove underline on text */
  margin-top: 10px;
}

/* Ensure white text for <a> tags within .modal-button */
.modal-button3 a {
  color: white;
  text-decoration: none; /* Ensure no underline */
}

/* Hover effects */
.modal-button3:hover {
  background: #4b645d;
  border-color: #c0c0c0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.modal-button3:hover a {
  color: white; /* Ensure text stays white on hover */
}



/* ----------------------- END ASTOR BUSINESS PLAN ------------------- */


.astor-index h6 em{
  font-size: 25px;
  font-weight: bold;
  color: #689C7A;
}

.astor-index h6{
  font-size: 25px;
  font-weight: bold;
}

.astor-index h2{
  font-size: 40px;
  font-weight: bold;
}

.astor-container3{
  position: relative;
  text-align: left;
  padding: 20px;
  height: 448.58px;
}

.astor-container4{
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: whitesmoke;
  border-radius: 10px;
  text-align: left;
  padding: 40px;
  height: 500px;
  opacity: 0.97;
  width: 100%;
  margin-bottom: 200px;
}

.astor-container5{
  position: relative;
  border-radius: 20px;
  height: 500px;
  opacity: 0.97;
  width: 100%;
  padding: 10px;
  margin-bottom: 200px;
  background-color: whitesmoke;
}

.astor-container1{
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #7e9190;
  border-radius: 23px;
  text-align: center;
  padding: 20px;
}

.contact{
  padding: 0px;
  width: 400px;
}

.contact-left{
  margin-left: 40px;
  width: 400px;
}

.contact-right{
  padding-right: 0px;
  width: 300px;
}

.astor-contact-input{
  height: 50px;
  width: 100%;
  border-radius: 10px;
  border-color: #689C7A;
}

.astor-contact-button{
  height: 50px;
  width: 100%;
  border: 20px;
  border-radius: 10px;
  background-color: #7e9190;
  color: black;
}




/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: Black;
  text-decoration: none !important;
}

a:hover {
  color: #7e9190;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  font-weight: 300;
  color: black;
}

img {
  width: 100%;
  overflow: hidden;
}


/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Montserrat' sans-serif;

}

::selection {
  background: #689C7A;
  color: #fff !important;
}

::-moz-selection {
  background: #689C7A;
  color: #fff !important;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading2 {
  position: relative;
  z-index: 2;
}

.section-heading2 h6 {
  font-size: 15px;
  font-weight: 700;
  color: #7e9190;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.section-heading2 h4 {
  color: #2a2a2a;
  font-size: 35px;
  font-weight: 700;
  text-transform: ;
  margin-bottom: 25px;
}

.section-heading2 h4 em {
  font-style: normal;
  color:#7e9190;
}

.section-heading .line-dec {
  width: 50px;
  height: 2px;
  background-color: #689C7A;
}

.border-first-button a,
.border-first-button2 a {
  display: inline-block !important;
  padding: 12px 20px !important;
  border-radius: 5px;
  font-weight: bold !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease;
  width: 100%;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Specific styles for .border-first-button */
.border-first-button a {
  color: white !important;
  border: 1px solid #7e9190 !important;
  background-color: #7e9190;
}

.border-first-button a:hover {
  background-color: #4B5756;
  border-color: #c0c0c0;
  color: white !important;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* Specific styles for .border-first-button2 */
.border-first-button2 a {
  color: #7e9190 !important;
  border: 1px solid #7e9190 !important;
  background-color: #fff;
}

.border-first-button2 a:hover {
  background-color: #4B5756;
  color: white !important;
  border-color: #c0c0c0;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.pre-header {
  background-color: #efefef;
  height: 60px;
  padding: 15px 0px;
}

.pre-header ul li {
  display: inline-block;
}

.pre-header ul.info li {
  margin-right: 45px;
}

.pre-header ul.info li a {
  color: #afafaf;
  font-size: 14px;
  transition: all .3s;
}

.pre-header ul.info li a:hover {
  color: #689C7A;
}

.pre-header ul.info li a i {
  font-size: 18px;
  margin-right: 8px;
}

.pre-header ul.social-media {
  text-align: right;
}

.pre-header ul.social-media li {
  margin-left: 5px;
}

.pre-header ul.social-media li a {
  background-color: #afafaf;
  color: #fff;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all .3s;
}

.pre-header ul.social-media li a:hover {
  background-color: #689C7A;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #7e9190;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #7e9190;
  content: '';
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: #fff;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo {
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  padding: 0px 20px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #689C7A!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #689C7A!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #689C7A!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #2a2a2a;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #689C7A;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
  .background-header .nav li a.active:after {
    display: none;
  }
}

@media (max-width: 767px) {
  .pre-header ul.info li:last-child {
    display: none;
  }
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #689C7A!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #689C7A!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #689C7A;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #689C7A;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: whitesmoke;
  padding: 120px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url();
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 60px;
  width: 262px;
  height: 625px;
  z-index: 1;
}

.main-banner:before {
  content: '';
  background-image: url();
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 60px;
  width: 1159px;
  height: 797px;
  z-index: -1;
}

.main-banner .left-content {
  margin-right: 15px;
}

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #689C7A;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  color: #2a2a2a;
  margin-bottom: 20px;
}

.main-banner .left-content p {
  margin-bottom: 30px;
  margin-right: 45px;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width: 593px;
}



/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

#about {
  padding-top: 300px;
  padding-bottom: 300px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top;
  background-attachment: fixed;
}

.about-left-image img {
  margin-right: 45px;
}

.about-right-content p {
  margin-top: 30px;
  margin-bottom: 45px;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item .progress .progress-bar {
  border-color: #689C7A;
}

.second-skill-item .progress .progress-bar {
  border-color: #726ae3;
}

.third-skill-item .progress .progress-bar {
  border-color: #f58b56;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 18px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services {
  padding-top: 130px;
  position: relative;
}

.services:after {
  content: '';
  background-image: url(../images/services-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 786px;
  height: 1217px;
  z-index: 0;
}

.services:before {
  content: '';
  background-image: url(../images/services-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 400px;
  width: 161px;
  height: 413px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.services .naccs {
  position: relative;
  z-index: 1;
}

.services .icon {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.services .naccs .menu div h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
}

.services .icon img {
  margin-bottom: 10px;
  max-width: 60px;
  min-width: 60px;
}

.services .naccs .menu {
  text-align: center;
  margin-bottom: 30px;
}

.services .naccs .menu div {
  color: #2a2a2a;
  margin: 0px;
  width: 15%;
  font-size: 20px;
  font-weight: 700;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services .naccs .menu div .thumb {
  display: inline-block;
  width: 100%;
  padding: 30px 0px;
  background-color: #fff;
}

.services .naccs .menu div.active {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.services ul.nacc {
  height: 100% !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 15px;
  padding: 80px 120px 50px 120px;
}

.services ul.nacc li {
  width: 100%;
}

.services ul.nacc li .right-image img {
  max-width: 420px;
  float: right;
}

.services .nacc .thumb h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 25px;
}

.services .nacc .thumb .main-white-button {
  text-align: right;
  margin-top: 40px;
}

.services .nacc .thumb .main-white-button a {
  background-color: #8d99af;
  color: #fff;
}

.services .nacc .thumb .main-white-button a i {
  background-color: #fff;
  color: #8d99af;
}

.services .left-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #689C7A !important;
}

.services .left-text p {
  margin-bottom: 30px;
}

.nacc .ticks-list span {
  display: inline-block;
  opacity: 1;
  margin-right: 45px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 400;
}



/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url();
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: white;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  margin-top: 130px;
  z-index: 2;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: black;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}



.free-quote form {
  background-color: #fff;
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
  width: 95%;
  min-height: 40px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.free-quote input[type="text"],
.free-quote input[type="email"] {
  background-color: #f9f9f9;
  border: none;
  border-radius: 20px;
  padding: 10px 15px;
  width: 45%;
  margin-right: 10px;
  font-size: 16px;
  color: #333;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.free-quote input[type="text"]::placeholder,
.free-quote input[type="email"]::placeholder {
  color: #aaa;
}

.free-quote button {
  background-color: #7e9190;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 12px 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.free-quote button:hover {
  background-color: #4B5756;
}

@media (max-width: 768px) {
  .free-quote form {
    flex-direction: column;
  }
  
  .free-quote input[type="text"],
  .free-quote input[type="email"] {
    width: 100%;
    margin: 5px 0;
  }
}



/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 130px;
  overflow: hidden;
  position: relative;
}

.our-portfolio:before {
  content: '';
  background-image: url(../images/portfolio-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 414px;
  height: 861px;
  z-index: 1;
}

.our-portfolio:after {
  content: '';
  background-image: url(../images/portfolio-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 677px;
  height: 759px;
  z-index: 1;
}

.our-portfolio .section-heading {
  margin-bottom: 80px;
}

.our-portfolio .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  position: relative;
  z-index: 2;
}

.our-portfolio .item {
  position: relative;
  z-index: 222;
}

.portfolio-item {
  border-radius: 25px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  margin: 15px;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item:hover .down-content h4,
.portfolio-item:hover .down-content span {
  color: #689C7A;
}

.portfolio-item .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
  overflow: hidden;
}

.portfolio-item .down-content {
  background-color: #fff;
  text-align: center;
  padding: 18px 0px;
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
}

.portfolio-item .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 8px;
  transition: all .3s;
}

.portfolio-item .down-content span {
  font-size: 15px;
  color: #afafaf;
  transition: all .3s;
}

.our-portfolio .owl-nav {
  display: inline-block!important;
  position: absolute;
  top: -125px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  font-size: 30px;
  background-color: #eee;
  border-radius: 50%;
  color: #fff;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #fff;
  background-color: #689C7A;
}


/* 
---------------------------------------------
Blog
--------------------------------------------- 
*/

.blog:before {
  content: '';
  background-image: url();
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.blog {
  position: relative;
  padding-top: 10px;
}

.blog .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.blog .section-heading .line-dec {
  margin: 0 auto;
}

.blog-post2 {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 25px;
  position: relative;
  z-index: 2;
}

.show-up {
  position: relative;
  z-index: 222;
}

.blog-post2 .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}

.blog-post2 .down-content {
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
  background-color: #fff;
  padding: 30px;
}

.blog-post2 .down-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #689C7A;
  border-radius: 18px;
  display: inline-block;
}

.blog-post2 .down-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.blog-post2 .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}

.blog-post2 .down-content p {
  margin-bottom: 30px;
}

.blog-post2 .down-content span.author {
  font-size: 15px;
  color: #2a2a2a;
}

.blog-post2 .down-content span.author img {
  max-width: 56px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-post2 .down-content .border-first-button {
  display: inline-block;
  float: right;
}

.blog-post2s {
  margin-left: 30px;
}

.post-item2 {
}

.last-post-item2 {
  margin-bottom: 0px;
}

.post-item2 .thumb {
  display: inline-block;
  float: top;
  margin-right: 30px;
}

.post-item2 .thumb img {
  border-radius: 23px;
  display: inline-block;
}

.post-item2 .right-content {
  padding-top: 0px;
}

.post-item2 .right-content span.category {
  max-width: 56px;
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #689C7A;
  border-radius: 8px;
  display: inline-block;
}

.post-item2 .right-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.post-item2 .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: 30px;
}


/* 
---------------------------------------------
contact2
--------------------------------------------- 
*/

.contact2-us {
  padding-top: 130px;
}

.contact2-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact2-us .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

/*
form#contact2:before {
  position: absolute;
  right: 0;
  top: 0;
  width: 726px;
  height: 78px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}
*/

.contact2-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
}

/*
form#contact2:after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 532px;
  height: 106px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}
*/

form#contact2 {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact21 {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact2 #map iframe {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-bottom: -7px;
  position: relative;
  z-index: 2;
}

.fill-form2 {
  padding: 10px 20px 10px 20px;
}

.fill-form2 .info-post {
  margin-bottom: 20px;

}

.fill-form2 .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 23px;
  padding: 25px 15px;
  height: 170px;
}

.fill-form2 .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
}

.fill-form2 .icon a {
  margin-top: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  transition: all .3s;
}

.fill-form2 .icon:hover a {
  color: #689C7A;
}

form#contact2 input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}

form#contact2 input::placeholder {
  color: #aaa;
}

form#contact2 textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}

form#contact2 textarea::placeholder {
  color: #aaa;
}

form#contact2 button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #689C7A;
  margin-top: 30px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: 1px solid #689C7A;
  transition: all .3s;
  outline: none;
}

form#contact2 button:hover {
  background-color: #689C7A!important;
  color: #fff!important;
}

/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
  background-color: #aabaab;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;

}

footer p {
  text-align: center;
  margin: 20px 0px;
  color: white;
}

footer p a {
  color: white;
  transition: all .5s;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  form#contact2 {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    padding: 226px 0px 30px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts2 {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item2 {
    margin-bottom: 70px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact2-info {
    margin-top: 60px;
  }
  form#contact2 {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div  {
    font-size: 0px;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts2 {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item2 {
    margin-bottom: 30px;
  }
  .post-item2 .thumb img {
    max-width: 140px;
  }
  .post-item2 .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact2 {
    padding: 30px;
  }
}


.table-wrapper {
    min-height: 500px; /* Adjust to your desired height */
    overflow-y: auto;  /* Enable vertical scroll if necessary */
    overflow-x: auto;  /* Enable horizontal scroll */
    display: block;
}

table {
    width: 100%; /* Make sure the table uses the available space */
}

th, td {
    white-space: nowrap; /* Prevents table cells from wrapping */
}

/* Add borders to the cashflow table and its elements */
.cashflow-table {
    border-collapse: collapse; /* Ensure borders do not overlap */
    width: 100%;
}

.cashflow-table th,
.cashflow-table td {
    border: 1px solid black; /* Add border to table cells */
    padding: 8px; /* Optional padding for better spacing */
    text-align: right; /* Align text to the right */
}

.cashflow-table th {
    background-color: #f2f2f2; /* Optional: add background color to header */
    text-align: left; /* Align headers to the left */
}

/* Make <th> elements in the rows with the class 'table-heading' bold */
.cashflow-table tbody tr.table-heading th {
    font-weight: bold;
}

/* Make other <th> elements in the table body normal */
.cashflow-table tbody th {
    font-weight: normal;
    font-size: 12;
}

.cashflow-table tbody td {
    font-weight: normal;
    font-size: 12;
}

/* Ensure the <th> elements in the table header are bold */
.cashflow-table thead th {
    font-weight: bold;
}

/* Add thick top border to both Gross Revenue and Net Revenue rows */
.cashflow-table tbody tr.gross-revenue-row,
.cashflow-table tbody tr.net-revenue-row {
    border-top: 2px solid black; /* Adjust thickness and color as needed */
    font-weight: bold;
}

/* Add double underline to Net Revenue row */
.cashflow-table tbody tr.gross-revenue-row th,
.cashflow-table tbody tr.gross-revenue-row td {
    border-bottom: 2px solid black;
    background-color: whitesmoke;
}

/* Add double underline to Net Revenue row */
.cashflow-table tbody tr.net-revenue-row th,
.cashflow-table tbody tr.net-revenue-row td {
    border-bottom: 3px solid black;
    font-weight: bold;
    background-color: lightgrey;
}

/* Add thick top border to both Gross Revenue and Net Revenue rows */
.cashflow-table tbody tr.total-fundable-costs-row,
.cashflow-table tbody tr.Total-Costs-row {
    border-top: 2px solid black; /* Adjust thickness and color as needed */
    font-weight: bold;
}

/* Add double underline to Net Revenue row */
.cashflow-table tbody tr.total-fundable-costs-row th,
.cashflow-table tbody tr.total-fundable-costs-row td {
    border-bottom: 2px solid black;
    background-color: whitesmoke;
}

/* Add double underline to Net Revenue row */
.cashflow-table tbody tr.Total-Costs-row th,
.cashflow-table tbody tr.Total-Costs-row td {
    border-bottom: 2px solid black;
    font-weight: bold;
    background-color: lightgrey;
}

/* Add double underline to Net Revenue row */
.cashflow-table tbody tr.profit-row th,
.cashflow-table tbody tr.profit-row td {
    font-weight: bold;
    color: white;
    background-color: #aabaab;
}